<template>
	<a-drawer
	  :title="title"
	   :width="450" @close="onClose" :visible="visible" :maskClosable="false" :bodyStyle="{ paddingBottom: '60px' }">
		<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
			<a-form-model-item label="系统选择" prop="system" ref="system">
				<a-radio-group v-model="form.system" buttonStyle="solid">
					<a-radio-button v-for="(item,index) in RouterSystemOPT" :key="index" :value="item.value">{{item.label}}</a-radio-button>
				</a-radio-group>
			</a-form-model-item>
			<a-form-model-item label="路由类型" prop="type" ref="type">
				<a-radio-group v-model="form.type" buttonStyle="solid">
					<a-radio-button v-for=" (item,index) in RouterTypeOPT" :key="index" :value="item.value">{{item.label}}</a-radio-button>
				</a-radio-group>
			</a-form-model-item>
			<!-- 树形菜单    tree-data-simple-mode  -->
			<a-form-model-item    label="上级权限"
			prop="pid" ref="pid">
				<a-tree-select :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" treeDataSimpleMode :tree-data="treeData"
				 placeholder="上级权限"  v-model ="form.pid" @change="onSelectTree">
				</a-tree-select>
			 </a-form-model-item>

			<a-form-model-item label="图标代码" prop="icon" ref="icon" v-if="form.type ==='page' && form.pid==='0'   ">
				<a-input v-model="form.icon" :placeholder="placeholder.icon" />
			</a-form-model-item>

			<a-form-model-item label="路由标题" prop="name" ref="name">
				<a-input v-model="form.name" :placeholder="placeholder.name" />
			</a-form-model-item>

			<a-form-model-item label="访问路径" prop="path" ref="path">
				<a-input v-model.number="form.path" :placeholder="placeholder.path" />
			</a-form-model-item>
			<a-form-model-item label="组件路径" prop="component" ref="component"  v-if="form.type==='page'" >
				<a-input v-model.number="form.component" :placeholder="placeholder.component" />
			</a-form-model-item>

			<a-form-model-item label="请求方式" prop="request" ref="request" v-if="form.type==='api'">
				<a-radio-group v-model="form.request" buttonStyle="solid">
					<a-radio-button v-for="(item,index) in RouterRequestOPT" :key="index" :value="item.value">{{item.label}}</a-radio-button>
				</a-radio-group>
			</a-form-model-item>

			<a-form-model-item label="权限标识" prop="permission" ref="permission" v-if="form.type=='api'" >
				<a-input v-model="form.permission" :placeholder="placeholder.permission" />
			</a-form-model-item>


			<a-form-model-item label="显示排序" prop="sort" ref="sort">
				<a-input v-model.number="form.sort" :placeholder="placeholder.sort" />
			</a-form-model-item>



			<a-form-model-item label="可见状态" prop="display" ref="display">
				<a-radio-group v-model="form.display" buttonStyle="solid">
					<a-radio-button v-for=" (item,index) in RouterDisplayOPT" :key="index" :value="item.value">{{item.label}}</a-radio-button>
				</a-radio-group>
			</a-form-model-item>

		</a-form-model>

		<footer class="drawer-footer">
			<a-button @click="onSubmit" type="primary">保存配置</a-button>
		</footer>



	</a-drawer>
</template>
<script>


	import {dictLoad,menuRecursion} from '../../../util/internal.api.js';
	import {menuAdd,menuUpdate} from '../public/http.js';

	export default {
		props: ['editRecord'],
		data() {
			return {
				isUpdate: false, //是否是更新模式
				title: '添加路由',
				RouterSystemOPT: [],
				RouterTypeOPT: [],
				RouterRequestOPT:[],
				RouterDisplayOPT:[],
				visible: true,
				labelCol: {
					span: 6
				},
				wrapperCol: {
					span: 16
				},
				form: {
					system: '',
					type: '',
					name: '',
					permission: '',
					request:'',
					pid: '0',
					component: '',
					path: '',
					sort: '',
					icon: '',
					display:''
				},
				placeholder: {
					name: '请设置路由标题 EG:参数配置',
					permission: '请设置权限标识 请与后台的权限注解表达式一致',
					pid: '请选择上级路由',
					component: '请填写前端组件地址或后端执行方法 EG:dev/conf',
					path: '请填写路由地址的访问路径 EG:/dev/conf',
					sort: '请填写路由的显示顺序 数值按升序排列',
					icon: '请设置路由图标代码',
					display:"请设置菜单的可见状态"
				},
				rules: {
					system: {
						required: true,
						message: '请选择所属系统',
						trigger: 'blur'
					},
					type: {
						required: true,
						message: '请设置路由类型',
						trigger: 'blur'
					},
					icon: {
						required: true,
						message: '请设置一个图标代码',
						trigger: 'blur'
					},
					name: [{
						required: true,
						message: '请设置路由标题2-4个字以内',
						trigger: 'blur'
					}],
					permission: [{
						required: true,
						message: '请设置路由标识',
						trigger: 'blur'
					}, {
						required: true,
						message: '请设置路由标识',
						trigger: 'blur'
					}, {
						pattern: /^[a-zA-Z0-9:]+$/,
						message: '路由标识只允许输入字母、数字、冒号',
						trigger: 'blur'
					}],


					request: {
						required: true,
						message: '请选择接口的请求方式',
						trigger: 'blur'
					},


					pid: {
						required: true,
						message: '请选择上级路由',
						trigger: 'blur'
					},
					component: {
						required: true,
						message: '请设置路由对应的组件路径或者方法路径',
						trigger: 'blur'
					},
					path: {
						required: true,
						message: '请设置路由的访问路径',
						trigger: 'blur'
					},
					sort: {
						required: true,
						message: '请设置显示排序',
						trigger: 'blur'
					},

					display: {
						required: true,
						message: '请设置菜单可见状态',
						trigger: 'blur'
					}


				},
				treeData: [],
			};
		},
		methods: {
			//提交表单
			onSubmit() {
				this.$refs.ruleForm.validate(valid => {
					if (valid) {

						if (this.isUpdate) {
							menuUpdate(this.form.id,this.form).then(res => this.xhrMsg(res));
						} else {

							menuAdd(this.form).then(res => this.xhrMsg(res));
						}
					}
				});
			},
			//新增和删除返回相同的消息构造
			xhrMsg(res) {

				if (res.code === 0) {
					//成功提醒
					this.$notification.success({
						message: '操作成功',
						description: res.message,
					});



					this.visible = false;
					this.$emit('closeFun', {
						render: true
					});
				} else {
					//错误提醒
					this.$notification.error({
						message: '操作失败',
						description: res.message,
					});
				}
				this.loading = false;
			},
			//关闭Modal
			onClose() {
				this.visible = false;
				this.$emit('closeFun', {render: false});
			},
			//获取路由树
			getRouterTree() {
				menuRecursion().then(res => {
					if (res.code === 0) {
						let defaultRouter = [{
							pId: "0",
							id: "-1",
							title: '--顶级菜单--',
							value: '0',
						}];

					 this.treeData = [...defaultRouter, ...res.data.result];
					}
				})
			},
			//监听选择
			onSelectTree(value, label, extra) {
				this.form.pid = value
			},
			//表单数据初始化
			fromVal() {
				let obj = {...this.editRecord};
				this.form =obj;
				if (obj.id) {
					this.isUpdate = true;
					this.title = "编辑路由"
					delete this.form.children;
				} else{
					this.form.sort='10'
				}

			}

			,
			 //数据初始化
					async init() {
					 //字典项初始化
					await dictLoad('RouterSystem').then(res => this.RouterSystemOPT = res)
					await dictLoad('RouterType').then(res => this.RouterTypeOPT = res)
					await dictLoad('RouterRequest').then(res => this.RouterRequestOPT = res)
					await dictLoad('RouterDisplay').then(res => this.RouterDisplayOPT = res)

					await this.getRouterTree(); //路由树始化
					 this.fromVal(); //初始化From 属性
					}

		},
		created() {

			this.init(); //初始化From 属性
		},
		computed: {
			IconShow() {
				return parseInt(this.form.pid) === 0;
			}
		}
	};
</script>
